<template>
    <div class="find-navBar">
            <div 
                class="nav-item" 
                v-for="item in navBar"
                :key="item.id"
            >
                <div class="nav-icon">
                    <img :src="item.url" alt="" class="nav-icon-img">
                    <span class="icon-date" v-if="item.date">{{item.date}}</span>
                </div>
                <div class="nav-name">{{item.name}}</div>
            </div>
        </div>
</template>
<script>
export default {
    name:'navBar',
    data() {
        return {
            navBar:[
                {
                    id:1,
                    url:'../../../static/img/rili.png',
                    date:new Date().getDate().length>1?new Date().getDate():`0${new Date().getDate()}`,
                    name:'每日推荐'
                },
                {
                    id:2,
                    url:'../../../static/img/gd6.png',
                    name:'歌单'
                },
                {
                    id:3,
                    url:'../../../static/img/paihang.png',
                    name:'排行榜'
                },
                {
                    id:4,
                    url:'../../../static/img/diantai.png',
                    name:'电台'
                },
                {
                    id:5,
                    url:'../../../static/img/zhibo.png',
                    name:'直播'
                }
            ],
        }
    }
}
</script>
<style lang="less" scoped>
    .find-navBar{
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 30px 0px;
        overflow: hidden;
        .nav-item{
            flex:1;
            text-align:center;
            margin-left: 44px;
            img{
                width: 90%;
                margin: 0 auto;
            }
            .nav-icon{
                position: relative;
                background: @bg-color1;
                text-align: center;
                border-radius: 50%;
                width:100%;
                padding:20px;
                box-sizing: border-box;
                .icon-date{
                    position: absolute;

                    bottom: 35px;
                    left:40px;
                    color: #fff;
                    font-size: 20px;
                }
            }
            &:first-child{
                margin-left: 0px;
            }
            .nav-name{
                margin-top:20px;
                font-size: 22px;
            }
        }
    }
</style>